<!DOCTYPE HTML>
<html>
<head>
<title>Paner testing html5 Aa!</title>
    <link rel="stylesheet" type="text/css" href="../../Main.css" />
    <script src="../Javascript/Main.js"></script>
<script>

    //All menu items array
    var menuItems;
    //Menu item clicked, redraw everything and then draw the clicked menu item
    function canvasClicked(canvas) {
        showMenu();
        drawClickedMenuItem(canvas);
    }

    //draw the menu
    function showMenu() {
        for (var i = 0;i<menuItems.length;i++) {
            drawMenuItem(menuItems[i]);
        }
    }

    function addEmptyMenuItem() {

        var ni = document.getElementById("ul");
        var newLi = document.createElement("li");
        ni.appendChild(newLi);

        var emptyMenuItem = document.createElement("div");

        emptyMenuItem.setAttribute("id","emptyCanvasDiv");
        emptyMenuItem.setAttribute("ondrop", "drop(event)");
        emptyMenuItem.setAttribute("ondragover", "allowDrop(event)");
        emptyMenuItem.setAttribute("class", "canvasDiv");
        emptyMenuItem.style.height = "60px";
        emptyMenuItem.style.width = "150px";
        emptyMenuItem.style.borderWidth = "3px";
        emptyMenuItem.style.borderColor = "red";
        emptyMenuItem.style.borderStyle = "solid";

        newLi.appendChild(emptyMenuItem);

    }
	
</script>
</head>
<body>
<div id="mainMenuDiv" class="clearfix">
    <ul id="ul">
        <li>
            <div id="canvasDiv1" class="canvasDiv" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:4px coral solid">
                <canvas draggable="true" ondragstart="drag(event)" id="HomeMenu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="Home">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
        <li>
            <div id="canvasDiv2" class="canvasDiv" ondrop="drop(event)" ondragover="allowDrop(event)">
                <canvas draggable="true" ondragstart="drag(event)" id="2Menu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="Second">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
        <li>
            <div id="canvasDiv3" class="canvasDiv" ondrop="drop(event)" ondragover="allowDrop(event)">
                <canvas draggable="true" ondragstart="drag(event)" id="3Menu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="About Us">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
        <li>
            <div id="canvasDiv4" class="canvasDiv" ondrop="drop(event)" ondragover="allowDrop(event)">
                <canvas draggable="true" ondragstart="drag(event)" id="4Menu" onclick="canvasClicked(this)" class="myCanvas" width="150" height="50" data-name="Map re gav gav">
                    Your browser does not support the HTML5 canvas tag.</canvas>
            </div>
        </li>
    </ul>
</div>
<script>

    //store all menu items to an array
    menuItems = new Array(document.getElementById("HomeMenu"),
            document.getElementById("2Menu"),document.getElementById("3Menu"),document.getElementById("4Menu"));

    //Show the menu when the page has loaded
    showMenu();

    addEmptyMenuItem();

</script>

</body>
</html>